$background: #cfd8dc;
$progress-track: #fff;
$progress-fill: #cc5d29;
$progress-size: 80px;
$progress-thickness: 3px;



.progress-circle {
  position: absolute;
  top: 50%; left: 50%;
  width: $progress-size; height: $progress-size;
  border: 0 solid $progress-fill;
  border-radius: 50%;
  line-height:80px;
  text-align:center;
  background:rgba(255,255,255,0.4);
  font-size:14px;
  cursor:pointer;
  &:hover{
    background:none;
    border: $progress-thickness solid $progress-fill;
    &:before{
      //-webkit-animation: progress 3s ease;
      @include animation('progress 3s infinite ease');
    }
  }
}

.progress-circle:before,
.progress-circle:after {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0; left: 0;
  display: block;
  width: 100%; height: 100%;
  margin: -$progress-thickness;
  border: $progress-thickness solid $progress-track;
  border-left-color: transparent;
  border-bottom-color: transparent;
  border-radius: inherit;
  transform: rotate(45deg);
}

.progress-circle:after {
  z-index: 1;
  transform: rotate(225deg);
  @include animation('none');
}

@include keyframes(progress) {
  0% {
    z-index: 0;
    border-top-color: $progress-track;
    border-right-color: $progress-track;
    transform: rotate(45deg);
  }
  
  38% {
    border-top-color: $progress-track;
    border-right-color: $progress-track;
    transform: rotate(225deg);
  }
  
  39% {
    border-top-color: $progress-fill;
    border-right-color: $progress-fill;
    transform: rotate(225deg);
  }
  
  40% {
    z-index: 0;
    transform: rotate(45deg);
  }
  
  41% {
    z-index: 3;
    transform: rotate(45deg);
  }
  
  79% {
    border-top-color: $progress-fill;
    border-right-color: $progress-fill;
    border-bottom-color: transparent;
    border-left-color: transparent;
    transform: rotate(224deg);
  }
  
  80% {
    border-color: $progress-fill;
  }
  
  90%, 100% {
    z-index: 3;
    border-color: $progress-fill;
    transform: rotate(225deg);
  }
}

